{% extends 'base.html' %}
{% load static blog_extra %}
{% block title %}日记{% endblock %}
{% block header_file %}
    <link rel="stylesheet" href="{% static 'css/timeline.min.css' %}"/>
{% endblock %}
{% block base_content %}
    <div class="timeline-box shadow">
        <div class="timeline-main">
            <h1><i class="fa fa-clock-o"></i>日记</h1>
            <div class="timeline-line"></div>
            {% for year, items in data.items %}
                <div class="timeline-year">
                    <h2>
                        <a class="yearToggle">{{ year }}月</a
                        ><i class="fa fa-caret-down fa-fw"></i>
                    </h2>
                    <div class="timeline-month">
                        <ul>
                            {% for item in items %}
                                <li>
                                    <div class="h4 animated fadeInLeft">
                                        <p class="date">{{ item.month_day }}</p>
                                    </div>
                                    <p class="dot-circle animated">
                                        <i class="fa fa-dot-circle-o"></i>
                                    </p>
                                    <div class="content animated fadeInRight">
                                        {{ item.content|safe }}
                                    </div>
                                    <div class="clear"></div>
                                </li>
                            {% endfor %}
                        </ul>
                    </div>
                </div>
            {% endfor %}
            <h1 style="padding-top: 4px; padding-bottom: 2px; margin-top: 40px">
                <i class="fa fa-hourglass-end"></i>THE END
            </h1>
        </div>
    </div>
{% endblock %}
{% block footer_file %}
    <script src="{% static 'js/timeline.min.js' %}"></script>
{% endblock %}
